<template>
	<tm-fullView>
		<tm-menubars title="分段器选项卡" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-32">基本示例</view>
			<view class="flex-center"><tm-segTabs  :list="list" v-model="active"></tm-segTabs></view>
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-32">个性化</view>
			<view class="flex-center"><tm-segTabs :round="24" :margin="[32,10]" font-size="s" :list="list" color="white" activeFontColor="red" bg-color="bg-gradient-red-lighten" v-model="active"></tm-segTabs></view>
			<view class="text-size-s text-weight-b my-32">指定整体宽度</view>
			<tm-segTabs :width="600" :round="24" :margin="[0,12]" :list="list" v-model="active"></tm-segTabs>
		</tm-sheet>
		<tm-sheet :shadow="24" :margin="[0,0]" :padding="[32,32]" :round="0">
			<view class="text-size-s text-weight-b mb-32">插槽示例</view>
			<tm-segTabs :list="list" round="0" activeFontColor="primary" fontSize="s" v-model="active">
				<template v-slot:default="{item}">
					<view class="flex-center">
						<tm-icons :color="(item.isActive ? item.color: 'grey')" :size="24" name="icon-plus" dense></tm-icons>
						<text class="pl-10">{{ item.data }}</text>
						
					</view>
				</template>
			</tm-segTabs>
		</tm-sheet>
		
		
		<tm-sheet :shadow="24">
			<view class="text-size-s  text-weight-b mb-32">其它示例(可以自定间隙)</view>
			<view class="">
				<tm-segTabs :gutter="10" round="0" :list="list" fontSize="s" activeFontColor="primary"  v-model="active"></tm-segTabs>
				<tm-gap ></tm-gap>
				<tm-segTabs :margin="[32,10]" :fllowTheme="false" :gutter="0" :round="2" :list="list" fontSize="s" activeColor="bg-gradient-primary-lighten" activeFontColor="white" v-model="active"></tm-segTabs>
				<tm-gap></tm-gap>
				
				<tm-button @click="list=['呵呵','未接电话', '所有电话', '监听']">修改数据</tm-button>
			</view>
		</tm-sheet>
	</tm-fullView>
</template>

<script>
import tmSegTabs from '@/tm-vuetify/components/tm-segTabs/tm-segTabs.vue';
import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
import tmButton from '@/tm-vuetify/components/tm-button/tm-button.vue';
import tmSheet from '@/tm-vuetify/components/tm-sheet/tm-sheet.vue';
import tmGap from '@/tm-vuetify/components/tm-gap/tm-gap.vue';
export default {
	components: { tmSegTabs, tmMenubars, tmFullView, tmSheet, tmIcons,tmButton,tmGap },
	data() {
		return {
			active: 2,
			list: ['事项', '未处理事项', '颜色选择']
		};
	},
	mounted() {
		let t = this;
		setTimeout(function() {
			t.active = 1
		}, 2000);
	}
};
</script>

<style lang="scss"></style>
